<template>
  <div class="box">
    <!-- 图片查看 -->
    <el-row style="el-row">
      <el-card v-for="(item,index) in listimg" :key="index" class="el-card">
          <img :src="item.url" class="image">
          <div>
            <span>{{item.title}}</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
            </div>
          </div>
        </el-card>
    </el-row>

    <div class="tilte">
        <p>基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表</p>
        <p class="urls">https://v-charts.js.org</p>
    </div>
    <!-- 图表功能 -->
    <div class="chart">
      <h2>折线图</h2>
      <el-row>
        <el-col :span="12">
          <ve-line :data="chartData"></ve-line>
        </el-col>
        <el-col :span="12">
          <ve-line :data="chartData1" :extend="extend"></ve-line>
        </el-col>
      </el-row>
    
      <h2>柱状图</h2>
      <el-row>
        <el-col :span="12">
          <ve-histogram :data="chartData2"></ve-histogram>
        </el-col>
        <el-col :span="12">
          <ve-histogram :data="chartData3" :settings="chartSettings"></ve-histogram>
        </el-col>
      </el-row>

      <h2>饼图+环图</h2>
      <el-row>
        <el-col :span="12">
          <ve-pie :data="chartData4"></ve-pie>
        </el-col>
        <el-col :span="12">
         <ve-ring :data="chartData5"></ve-ring>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default{
    name:'index',
    data(){
      this.extend = {
        'xAxis.0.axisLabel.rotate': 45
      }
      this.chartSettings = {
        axisSite: { right: ['下单率'] },
        yAxisType: ['KMB', 'percent'],
        yAxisName: ['数值', '比率']
      }
      return{
        currentDate: new Date(),
        listimg:[
          {url:require('../assets/imges/325530.jpg'),title:'乾坤未定,你我皆是黑马'},
          {url:require('../assets/imges/325634.jpg'),title:'云缠不知所起,像风吹千里不问归期'},
          {url:require('../assets/imges/325058.jpg'),title:'有一天与某一天'}
        ],

        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 8093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        },
        chartData1: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 },
            { '日期': '1/7', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/8', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/9', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/12', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        },
        chartData2: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        },
        chartData3: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        },
        chartData4: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '1/1', '访问用户': 1393 },
            { '日期': '1/2', '访问用户': 3530 },
            { '日期': '1/3', '访问用户': 2923 },
            { '日期': '1/4', '访问用户': 1723 },
            { '日期': '1/5', '访问用户': 3792 },
            { '日期': '1/6', '访问用户': 4593 }
          ]
        },
        chartData5: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '1/1', '访问用户': 1393 },
            { '日期': '1/2', '访问用户': 3530 },
            { '日期': '1/3', '访问用户': 2923 },
            { '日期': '1/4', '访问用户': 1723 },
            { '日期': '1/5', '访问用户': 3792 },
            { '日期': '1/6', '访问用户': 4593 }
          ]
        }
      }
    }
  }
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .image {
    width: 100%;
    display: block;
  }
  .clearfix:after {
      clear: both
  }
  .el-row{
    display: flex;
  }
  .el-card{
    margin: 0 10px;
  }
  .chart{
    margin-top: 20px;
    padding: 20px 0;
    background: white;
  }
  .tilte{
    margin-top: 20px;
    background: white;
    padding: 20px;
    color: #606266;
    font-weight: bold;
  }
  .tilte .urls{
    color: red;
  }
</style>
